<template>
	<div class="j-membership">
		<div class="container">
			<div class="module-title text-center">
				<span class="title-ch">会员服务</span><br>
				<span class="title-en">MEMBERSHIP SYSTEM</span>
			</div>
			<ul class="clearfix text-center member-list">
				<li v-for="(item,index) in iconList" :key="index">
					<div class="member-icon-box">
						<div class="member-img" @mouseover="mouseover(item.id)" @mouseout="mouseout(item.id)">
							<img :src="item.src" alt="">
						</div>
						<div class="member-text">{{item.name}}</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
export default {
  data () {
    return {
      iconList: [
        {id: 0, src: require('../../assets/icon/hy01.png'), name: '预约参观'},
        {id: 1, src: require('../../assets/icon/hy02.png'), name: '出生证明提交'},
        {id: 2, src: require('../../assets/icon/hy03.png'), name: '预约咨询/办理'},
        {id: 3, src: require('../../assets/icon/hy04.png'), name: '检测报告'},
        {id: 4, src: require('../../assets/icon/hy05.png'), name: '保单查询'}
      ]
    }
  },
  methods: {
    mouseover (index) {
      if (index === 0) {
        this.iconList[index].src = require('../../assets/icon/hy01-1.png')
      } else if (index === 1) {
        this.iconList[index].src = require('../../assets/icon/hy02-1.png')
      } else if (index === 2) {
        this.iconList[index].src = require('../../assets/icon/hy03-1.png')
      } else if (index === 3) {
        this.iconList[index].src = require('../../assets/icon/hy04-1.png')
      } else if (index === 4) {
        this.iconList[index].src = require('../../assets/icon/hy05-1.png')
      }
    },
    mouseout (index) {
      if (index === 0) {
        this.iconList[index].src = require('../../assets/icon/hy01.png')
      } else if (index === 1) {
        this.iconList[index].src = require('../../assets/icon/hy02.png')
      } else if (index === 2) {
        this.iconList[index].src = require('../../assets/icon/hy03.png')
      } else if (index === 3) {
        this.iconList[index].src = require('../../assets/icon/hy04.png')
      } else if (index === 4) {
        this.iconList[index].src = require('../../assets/icon/hy05.png')
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	/*@import "../../styles/common.css";*/
	.j-membership{
		background: #f8f8f8;
		.member-list{
			margin: 0 0 120px 0;
			padding-top: 15px;
			li{
				float: left;
				width: 20%;
				padding: 0 15px;
				.member-icon-box{
					display: table;
					margin: 0 auto;
					width: auto;
					.member-img{
						img{
							display: block;
							margin: 0 auto;
						}
					}
					.member-img:hover img {
						display: block;
						margin: 0 auto;
						box-shadow: 0 0 3px 4px #eeeeee;
						border-radius: 50%;
					}
					.member-text{
						margin-top: 10px;
						font-size: 16px;
						color: #333;
					}
					.member-icon-box:hover .member-text{
						font-weight: bold;
					}
				}
			}
		}
	}
	@media (max-width: 767px){
		.news-back{
			padding: 0!important;
			margin-top: 30px!important;
		}
		.member-list {
			margin: 35px auto 60px auto!important;
			li{
				width: 33.333333%!important;
				margin-bottom: 10px;
			}
		}
		.member-text{
			font-size: 13px!important;
		}
	}
</style>
